<template>
	<swiper class="swiper-box" indicator-dots="true" autoplay="true" interval="3000" circular="true" >
		<swiper-item>
			<view class="swiper-item-view" style="background-color: #FF5722;">
				<image src="/static/41988f938339e981.gif" mode=""></image>
				<text></text>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item-view" style="background-color: #2962FF;">
				<image src="/static/7ca8-iquxrui9176158.gif" mode=""></image>
				<text></text>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item-view" style="background-color: #607D8B;">
				<image src="/static/20200402203301_tymmx.gif" mode=""></image>
				<text></text>
			</view>
		</swiper-item>
	</swiper>

<swiper class="swiper-box vertical-swiper" indicator-dots="true" autoplay="true" interval="3000" circular="true" vertical="true">
	<swiper-item>
			<view class="swiper-item-view" style="background-color: #FF5722;">
				<image src="/static/41988f938339e981.gif" mode=""></image>
				<text></text>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item-view" style="background-color: #2962FF;">
				<image src="/static/7ca8-iquxrui9176158.gif" mode=""></image>
				<text></text>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item-view" style="background-color: #607D8B;">
				<image src="/static/20200402203301_tymmx.gif" mode=""></image>
				<text></text>
			</view>
		</swiper-item>
	</swiper>
	</template>


<style>
	.swiper-box {
		width: 100%;  margin-bottom: 20px;
		
		  horizontal-swiper {    
			  height: 300px;/* swiper 也必须有高度 */}
		  vertical-swiper {
			  height: 200px;}
}

	.swiper-item-view {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center; /* 水平居中 */
		align-items: center; /* 垂直居中 */
	}
	.swiper-item-view text {
		color: white;
		font-size: 24px;
	}
	vertical-img {width: 100%;
					height: 100%; 
					object-fit: cover; /* 图片填充容器，避免变形 */}
</style>
